<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="search"/>&nbsp;
      <button @click="handleSearch">Search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
export default {
  name: "Search",
  data(){
    return{
      search: '',
    }
  },
  methods:{
    handleSearch(){
      this.$bus.$emit('getUsers', { isFirst: false,
        isLoading: true,
        errMsg: '',
        users: [],})
      axios.get(`https://api.github.com/search/users?q=${this.search}`).then(({data})=>{
        console.log('success',data)
        this.$bus.$emit('getUsers', {
          isLoading: false,
          users: data.items,})
      }).catch(res=>{
        console.log('err12,,',res)
        this.$bus.$emit('getUsers', {
          isLoading: false,
          errMsg: res,
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
